<template>
	<view class="content">
		<view class="input-content">
			<view class="title">个人基本信息</view>
			<view class="row b-b" style="border-radius: 16rpx 16rpx 0 0 ;margin-top: 20rpx;">
				<text class="tit">姓名</text>
				<input class="input" type="text" v-model="requestData.real_name" placeholder="请填写姓名" placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">联系电话</text>
				<input class="input" type="text" maxlength="11" v-model="requestData.contact" placeholder="请填写联系电话" placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">居住小区</text>
				<input class="input" type="number" v-model="requestData.plot" placeholder="请填写居住小区" placeholder-class="placeholder" />
			</view>
			<view class="title" style="margin-top: 20rpx;">你想提升哪些技能</view>
			
			<view class="row b-b" style="border-radius:0 0 16rpx 16rpx ;height: 240rpx;padding-left: 0px;"> 
				<textarea  placeholder="请输入内容(非必填)" style="height: 200rpx;width: 100%;" />
				
			</view>
			
		</view>
		
		<view class="tips">
			<view class="tip_title">注释说明:</view>
			<view class="tip_content">1.注释说明1注释说明1注释说明1注释说明1注释说明1注释说明1注释说明1注释说明1注释说明1注释说明1</view>
			<view class="tip_content">2.注释说明2</view>
			<view class="tip_content">3.注释说明3注释说明3注释说明3注释说明3</view>
			<view class="tip_policy">
				<radio color='#90bbda' style="transform:scale(0.8)" :checked="is_checked"></radio>
				<view class="policy_content" @click="toNav()">《意识形态责任书》</view>
			</view>
		</view>
		
		<view class="p-d-bottom" @click="confirm">
			<view style="margin:16rpx 32rpx 0rpx 32rpx">
				<button  class="pay-btn">提交</button>
			</view>
		</view>
	

	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				requestData: {
					real_name:'',
					contact: '',
					plot: ''
				},
				is_checked:false
			}
		},
		onLoad(option){
			
		},
		methods: {					
			toNav(){
				uni.navigateTo({
					url:'/pages/public/policy'
				})
			},
			//提交
			async confirm(){
				
				let data = this.requestData;
				if(!data.real_name){
					this.$api.msg('请填写姓名');
					return;
				}
				if(!data.contact){
					this.$api.msg('请填写联系电话');
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.contact)){
					this.$api.msg('请输入正确的联系电话');
					return;
				}
				if(!data.plot){
					this.$api.msg('请填写居住小区');
					return;
				}
				if(!this.is_checked){
					this.$api.msg('请阅读责任书');
					return;
				}
				let res = await this.$api._modal('确认信息真实有效')
				if(res.confirm){
					console.log('rrr');
					let params = data;
					params.role_value=2;
					let rel = await Api.apiCall('post',Api.apiName.update_user,params);
					if(rel.data){
						this.$api.msg(`提交成功`);
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/campus/index'
							})
						}, 800)
					}
					
				}
				
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		
	}
	.content{
		margin: 32rpx
		
	}
	.row{
		display: flex;
		align-items: center;
		position: relative;
		// padding:0 30upx;
		padding-left: 24rpx;
		height: 92rpx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 150upx;
			font-size: 28rpx;
			color: $font-color-dark;
			font-weight: 400;
		}
		.input{
			flex: 1;
			font-size: 28rpx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.add-btn{
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 686rpx;
		height: 84rpx;
		// margin: 14rpx auto;
		font-size: 36rpx;
		color: $uni-background-btn;
		background-color: $uni-fontcolor-default;
		border-radius: 10upx;
		font-weight: 400;
		
	}
	
	.b-b:after,
	.b-t:after {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		height: 0;
		content: '';
		transform: scaleY(.5);
		border-bottom: 1px solid $border-color-base;
		width: 93%;
		margin: auto;
	}
	
	.b-b:after {
		bottom: 0;
	}
	
	.b-t:after {
		top: 0;
	}
	.p-d-bottom{
		// border: 1px solid red;
		height: 140rpx;
		width: 100%;
		margin-top: 100rpx;
	}
	.pay-btn{
		color:#ffffff;
		width: 100%;
		background:#319eec;
		height: 84rpx;
		border-radius: 12rpx; 
	}
	.title{
		color: #fff;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 12rpx;
		background: #90bbda;
	}
	
	.tips{
		
	}
	textarea{
		resize: none;
		background: none;
		color: inherit;
		opacity: 1;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
		text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
		padding: 8rpx;
		font-size: 14px;
	}
	.tip_title{
		color:#333333;
		font-size: 26rpx;
		padding: 12rpx;
	}
	.tip_content{
		color:#333333;
		font-size: 24rpx;
		padding: 2rpx 16rpx;
	}
	.tip_policy{
		display: flex;
		justify-content: center;
		margin-top: 120rpx;
	}
	.policy_content{
		font-size: 13px;
		height: 26px;
		line-height: 26px;
		background: #90bbda;
		border-radius: 18rpx;
		padding: 0rpx 20rpx;
		color: #fff;
		opacity: 0.7;
	}
</style>
